// noinspection JSAnnotator
import React from 'react';
// noinspection JSAnnotator
import {
    Route,
    Link
} from 'react-router-dom';

// noinspection JSAnnotator
import Detail from './detail';
// noinspection JSAnnotator
import Navigator from '../common/navigator';


class Product extends React.Component {
    constructor(props) {
        super();
        this.state = {
            list: []
        }
    }

    componentDidMount() {
        // noinspection JSAnnotator
		let myRequest = 'http://localhost:4000/product';
        let myInit = {
            method: 'GET',
            mode: 'cors',
            cache: 'default',
            dataType: 'json',
        };
        fetch(myRequest, myInit).then((response) => {
            return response.json();
        }).then((json) => {
            console.log(1,json.data);
            this.setState({list: json.data});
        })
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextProps;
    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        let listArr = this.state.list || [];
        let match = this.props.match;
        console.log('listArr',listArr);
        let nodeList = listArr.map((v, k) => {
            let path = {
                pathname: `${match.url}/` + v.id + ``,
                state: v,
            };
            return (
                <li key={k}>
                    <div className="image">
                        <Link to={path}>
                            <img src={v.cover} alt=""/>
                        </Link>
                    </div>
                    <Link to={path}>
                        {v.title}
                    </Link>
                </li>
            );
        });
        return (
            <div>
                <Route path={`${match.url}/:aaa`} component={Detail}/>

                <Route exact path={match.url} render={() => (
                    <div>
                        <div className="proBox">
                            <h3>热门产品</h3>
                            <ul className="ul1">
                                {nodeList}
                            </ul>
                        </div>
                        <Navigator/>
                    </div>
                )}/>

            </div>
        )
    }
}


export default Product;
